<script setup>
    import {ref} from "vue";
    import { dataCompress, dataUnCompress } from "@/library/data";
    import Nav from "@/components/Nav.vue";
    import * as xlsx from 'xlsx'
    import cryptoJs from "crypto-js";

 const userList =  ref([]);

 const getUserList = () =>{
     userList.value = [
         {
             id: 1,
             username: '用户1',
             nickname: 'Imooc 用户 1',
             phone: '15588888881',
         },
         {
             id: 2,
             username: '用户2',
             nickname: 'Imooc 用户 2',
             phone: '15588888882',
         },
         {
             id: 3,
             username: '用户3',
             nickname: 'Imooc 用户 3',
             phone: '15588888883',
         },
         {
             id: 4,
             username: '用户4',
             nickname: 'Imooc 用户 4',
             phone: '15588888884',
         },
         {
             id: 5,
             username: '用户5',
             nickname: 'Imooc 用户 5',
             phone: '15588888885',
         },
         {
             id: 6,
             username: '用户6',
             nickname: 'Imooc 用户 6',
             phone: '15588888886',
         },
         {
             id: 7,
             username: '用户7',
             nickname: 'Imooc 用户 7',
             phone: '15588888887',
         },
         {
             id: 8,
             username: '用户8',
             nickname: 'Imooc 用户 8',
             phone: '15588888888',
         },
         {
             id: 9,
             username: '用户9',
             nickname: 'Imooc 用户 9',
             phone: '15588888888',
         }
     ]
 }

 getUserList();
//  导入
 const importExcel = () => {
    // 弹出文件选择对话框
    tools.ipcInvoke('getFile', {
        title: '请选择一个Excel文件',
        buttonLabel: '确认选择',
        filters: [
            {
                name: 'Excel 文件',
                extensions: ['xls', 'xlsx']
            }
        ],
        properties: [
            'openFile'
        ]
    }).then((res) => {
        if (res.canceled) return
        let filePath = res.filePaths[0]
        tools.ipcInvoke('readSystemFile', filePath, '')
        .then(({err, data}) => {
            // console.log(err, data, 'err, data');
            if (err !== null) {
                console.error('文件读取错误');
                return
            }
            try {
                // 解析Excel文件
                const excel = xlsx.read(data, {
                    type: 'array'
                })
                const sheetName = excel.SheetNames[0]
                const workSheet = excel.Sheets[sheetName]
                const importData = xlsx.utils.sheet_to_json(workSheet, {
                    header: [
                        "username",
                        "nickname",
                        "phone"
                    ]
                })
                importData.splice(0, 1)
                sendToRequest(importData)
                // 解析后的数据加入到表格中
                userList.value.push(...importData)
                console.log(importData, 'importData---');
            } catch (error) {
                console.error(error);  
            }
        })
    })
 }
//  数据处理
 const sendToRequest = (data) => {
    let secretKey = "gino1223"
    let dataC = dataCompress(data, function (item) {
        item.phone = cryptoJs.AES.encrypt(item.phone.toString(), secretKey).toString()
        return item
    })
    console.log(dataC);
    console.log(dataUnCompress(dataC));
}
// 导出Excel
const exportExcel = () => {
    tools.ipcInvoke('saveFile', {
        title: '请选择保存文件的路径',
        defaultPath: '导出文件',
        buttonLabel: '确认保存',
        filters: [
            {
                name: 'Excel 文件',
                extensions: ['xlsx']
            }
        ],
    }).then( res => {
        if (res.canceled) return
        let filePath = res.filePath
        let newArray = []
        for (let item of userList.value) {
            let t = {...item}
            delete t.id // 删掉ID
            newArray.push(Object.values(t))
        }
        const workSheet = xlsx.utils.aoa_to_sheet([
            ["用户名", "昵称", "手机号"],
            ...newArray
        ])
        const workBook = xlsx.utils.book_new()
        xlsx.utils.book_append_sheet(workBook, workSheet)
        const excelData = xlsx.write(workBook, {
            type: "buffer"
        })
        tools.ipcInvoke('writeSystemFile', filePath, excelData, '')
        .then(res => {
            if (res === null) {
                console.log('数据导出成功');
            } else {
                console.log(res, '数据导出成功');
            }
        })
        console.log(newArray, 'res----- ');
        
    })
}
</script>

<template>
    <div class="container">
        <Nav :index="1"/>
        <div class="container-box">
            <div class="card">
                <div class="operation">
                    <div class="op-item add">添加</div>
                    <div class="op-item import" @click="importExcel">导入</div>
                    <div class="op-item export" @click="exportExcel">导出</div>
                </div>
                <div class="table-list">
                    <table>
                        <thead>
                            <tr>
                                <td>用户名</td>
                                <td>昵称</td>
                                <td>手机号</td>
                                <td width="120">操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="list in userList">
                            <td>{{ list.username }}</td>
                            <td>{{ list.nickname }}</td>
                            <td>{{ list.phone }}</td>
                            <td>
                                <a href="javascript:;">编辑</a>
                                <a href="javascript:;">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container{
    .container-box{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: calc(100vh - 68px);
        margin-top: 68px;
        background: #f3f3f3;
        display: flex;
        justify-content: center;
        align-items: center;
        .card{
            width: 1400px;
            height: 800px;
            background: #fff;
            border-radius: 10px;
            padding: 40px;
            display: flex;
            flex-direction: column;
        }
    }
}

.operation{
    display: flex;
    height: 38px;
    justify-content: right;
    .op-item{
        line-height: 38px;
        padding: 0 20px;
        font-size: 16px;
        background-color: #409EFF;
        border-radius: 5px;
        margin: 0 10px;
        color: #fff;
        cursor: pointer;
        transition: all .3s;
        &:hover{
            background-color: #65b0f9;
        }
    }
    .export{
        background-color: #E6A23C;
        &:hover{
            background-color: #fcc169;
        }
    }
}

.table-list{
    margin-top: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: auto;
    &::-webkit-scrollbar{
        width: 6px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: #0003;
        border-radius: 10px;
        transition: all .2s ease-in-out;
    }
    &::-webkit-scrollbar-track {
        border-radius: 10px;
    }
    table{
        width: 100%;
        max-height: 100%;
        border-collapse: collapse;
        td{
            font-size: 18px;
        }
        tr{
            line-height: 48px;
            height: 48px;
        }
        td{
            text-align: center;
            border: 1px solid #ebeef5;
        }
        thead{
            position: sticky;
            top: 0;
            background-color: #f5f7fa;
        }
        tbody{
            td{
                a{
                    margin: 0 5px;
                    color: #5b5b5b;
                    &:hover{
                        text-decoration: underline;
                        color: var(--primary);
                    }
                }
            }
        }
    }
}
</style>